html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --size: 80;
  --unit: calc((var(--size) / 489) * 1vmin);
  --skin: hsl(16, 34%, 55%);
  --sel: hsl(16, 100%, 93%);
  --sm: hsl(17, 92%, 81%);
  --sl: hsl(17, 100%, 88%);
  --elg: hsl(125, 46%, 52%);
  --lg: hsl(124, 53%, 38%);
  --mg: hsl(125, 70%, 18%);
  --dg: hsl(125, 59%, 11%);
  --b: hsl(282, 52%, 5%);
  --hair: rgba(85, 16, 12, 1);
  --hd: rgba(128, 47, 43, 1);
}

@mixin positioning($t, $r, $b, $l) {
  top: $t;
  right: $r;
  bottom: $b;
  left: $l;
}

@mixin w-h($w, $h) {
  width: #{$w + "%"};
  height: #{$h + "%"};
}

@mixin pseudo($content: "") {
  position: absolute;
  content: $content;
}

%brow {
  @include w-h(27, 13);
  top: 0;
  background: var(--b);
  border-radius: 50% 55% 0 0 / 100% 100% 0 0;
  span {
    @include w-h(94, 76);
    @include positioning(67%, null, null, 3%);
    border-radius: 50px;
    background: var(--skin);
    background: linear-gradient(260deg, var(--sm) 54%, var(--sl) 100%);
  }
}

%eye {
  @include w-h(24, 28);
  border-radius: 50%;
  top: 13.5%;
  background: linear-gradient(0deg, white 77%, rgb(117, 117, 117) 100%);
  z-index: 1;
  overflow: hidden;
  box-shadow: -1px -1px 2px rgb(143, 85, 64), 1px 2px 2px rgb(143, 85, 64);

  * {
    border-radius: 50%;
  }

  span:nth-of-type(1) {
    @include w-h(79, 76);
    @include positioning(13%, null, null, 25%);
    border: calc(var(--unit) * 0.5) hsl(240, 46%, 53%) solid;
    background: radial-gradient(
      circle at 70% 60%,
      hsl(194, 100%, 59%) 50%,
      hsl(247, 100%, 61%) 80%
    );
  }

  span:nth-of-type(2) {
    @include w-h(45, 46);
    @include positioning(30%, null, null, 45%);
    background: radial-gradient(
      circle at 60% 60%,
      hsl(247, 67%, 35%) 20%,
      hsl(0, 0%, 11%) 30%
    );
  }

  span:nth-of-type(3) {
    @include w-h(12, 10);
    @include positioning(36%, null, null, 62%);
    background: white;
    filter: blur(1px);
  }
}

%hair {
  @include w-h(15, 27);
  background: linear-gradient(87deg, var(--hd) 25%, var(--hair) 40%);
  z-index: 4;
  top: 39%;
  border-radius: 70% 50% 0% 100% / 60% 50% 0% 100%;
}

%ear {
  @include w-h(18, 25);
  background: var(--skin);
  top: 52%;
  z-index: -1;
  border-radius: 50% 0% 0% 100% / 22% 0% 0% 62%;
  background: linear-gradient(276deg, var(--skin) 5%, var(--sm) 54%);

  * {
    background: linear-gradient(
      -150deg,
      var(--skin) 25%,
      var(--sm) 54%,
      rgba(253, 143, 99, 0.1) 80%
    );
    $border-top: 2px rgba(143, 85, 64, 0.4) solid;
    border-left: $border-top;
  }

  span:nth-of-type(1) {
    @include positioning(17%, null, null, 20%);
    @include w-h(65, 56);
    border-radius: 50% 100% 0% 100%;
  }

  span:nth-of-type(2) {
    @include positioning(37%, null, null, 50%);
    @include w-h(35, 36);
    border-radius: 50% 100% 0% 100%;
  }
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  font-size: calc(15 * var(--unit));
}

.luigi {
  height: calc(489 * var(--unit));
  width: calc(371 * var(--unit));
  position: fixed;
  top: 11.5%;
  * {
    position: absolute;
  }
  .hat {
    @include w-h(88, 63);
    @include positioning(0, null, null, 7%);
    background: radial-gradient(
      circle at 50% 20%,
      var(--lg) 30%,
      var(--mg) 60%,
      var(--dg) 80%
    );
    border-radius: 50% 50% 45% 45% /70% 70% 35% 35%;
    z-index: 4;
    .logo {
      @include w-h(34, 34);
      @include positioning(10%, null, null, 33%);
      background: linear-gradient(180deg, white 60%, hsl(0, 0%, 46%) 100%);
      border-radius: 50%;
      box-shadow: inset 1px 1px 5px hsl(0, 0%, 46%);
      border: 2px solid hsl(0, 0%, 80%);
      z-index: -2;
      span {
        &:nth-of-type(1) {
          @include w-h(45, 77);
          @include positioning(4%, null, null, 15%);
          background: linear-gradient(-90deg, var(--lg) 60%, var(--dg) 90%);
          clip-path: polygon(31% 100%, 25% 10%, 70% 10%, 65% 100%);
        }
        &:nth-of-type(2) {
          @include w-h(77, 21);
          @include positioning(60%, null, null, 25%);
          background: linear-gradient(
            180deg,
            var(--lg) 80%,
            rgba(13, 49, 16, 0.7) 100%
          );
          clip-path: polygon(5% 100%, 25% 10%, 70% 10%, 68% 100%);
        }
      }
    }
    .peak {
      @include w-h(82, 22);
      @include positioning(43%, null, null, 9%);
      background: radial-gradient(
        circle at 50% 170%,
        var(--lg) 20%,
        var(--dg) 80%
      );
      border-top: 10px solid var(--lg);
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      &::before {
        @include pseudo();
        @include w-h(90, 100);
        @include positioning(-30%, null, null, 5%);
        background: radial-gradient(
          circle at 50% 90%,
          var(--elg) 20%,
          var(--mg) 100%
        );
        z-index: -1;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      }
    }
  }
  .face {
    @include w-h(63, 65);
    @include positioning(32%, null, null, 19.5%);
    background: var(--skin);
    background: linear-gradient(
      276deg,
      var(--skin) 20%,
      var(--sm) 54%,
      var(--sl) 80%
    );
    border-radius: 45% 45% 50% 50% /17% 17% 70% 70%;
    z-index: 5;
    overflow: hidden;
    box-shadow: inset 0 2px 2px var(--skin);
    #overlay {
      @include w-h(100, 20);
      background: rgba(48, 37, 33, 0.2);
      filter: blur(3px);
      top: 0;
      z-index: 20;
    }

    .brow {
      @extend %brow;
      left: 12%;
      transform: rotate(-10deg);
    }
    .brow-right {
      @extend %brow;
      right: 12%;
      transform: scaleX(-1);
      transform: rotate(10deg);
      span {
        @include positioning(67%, 3%, null, null);
        @include w-h(94, 76);
        background-color: var(--skin);
        background: linear-gradient(
          260deg,
          var(--skin) 70%,
          hsl(17, 65%, 75%) 100%
        );
      }
    }
    .mouth {
      @include w-h(32, 27);
      @include positioning(null, null, 14%, 34%);
      border-radius: 0 0 100% 100%;
      background: radial-gradient(
        circle at 49% 95%,
        rgb(216, 127, 146) 5%,
        rgb(167, 84, 97) 20%,
        rgb(44, 7, 24) 40%
      );
      z-index: -3;
      overflow: hidden;
      &::before {
        @include pseudo();
        @include w-h(110, 30);
        @include positioning(34%, null, null, -5%);
        border-radius: 50%;
        border-bottom: calc(10 * var(--unit)) solid rgb(238, 235, 235);
        background: var(--skin);
        box-shadow: 0 0.2em 1em rgb(44, 7, 24);
      }
    }
    .chin {
      @include w-h(26, 10);
      @include positioning(null, null, 10%, 37%);
      border-radius: 0 0 50% 50%;
      border-bottom: 2px solid rgba(136, 93, 77, 0.3);
      filter: blur(1px);
    }
    .nose {
      @include w-h(55, 39);
      @include positioning(28%, 23%, null, null);
      border: calc(var(--unit) * 0.3) solid var(--sel);
      border-radius: 88% 88% 100% 100%;
      z-index: 10;
      background: radial-gradient(
        circle at 33% 24%,
        var(--sel) 15%,
        var(--sl) 30%,
        var(--sm) 54%,
        hsl(17, 28%, 43%) 80%
      );
    }
    .tash {
      @include w-h(110, 50);
      @include positioning(7%, null, null, -5%);
      border-radius: 50%;
      z-index: -1;
      background: linear-gradient(
        276deg,
        var(--skin) 25%,
        var(--sm) 54%,
        var(--sl) 80%
      );
    }
    %tash {
      @include w-h(50, 35);
      border-radius: 50% 30% 50% 50%/ 50% 50% 50% 50%;
      z-index: -1;
      bottom: 25%;
      background: radial-gradient(
        circle at 49% 35%,
        var(--b) 20%,
        hsl(350, 21%, 23%) 45%,
        var(--b) 60%
      );
      overflow: hidden;

      &::before {
        @include pseudo();
        @include w-h(100, 30);
        top: 15%;
        background: hsla(282, 52%, 5%, 0.9);
        box-shadow: 0em 1em 2em 1em var(--b);
      }
    }
    #tash-l {
      @extend %tash;
      left: 5%;
      &::before {
        @include pseudo();
        @include w-h(100, 30);
        top: 15%;
        left: 0;
        background: hsla(282, 52%, 5%, 0.9);
        box-shadow: 1em 0 2em 1em var(--b);
      }
    }
    #tash-r {
      @extend %tash;
      right: 5%;
    }
    .eye-l {
      @extend %eye;
      left: 18.5%;
    }
    .eye-r {
      @extend %eye;
      right: 18.5%;
      transform: scale(-1);
    }
  }
  #hair-l {
    @extend %hair;
    left: 14%;
  }
  #hair-r {
    @extend %hair;
    right: 13%;
    background: linear-gradient(87deg, var(--hd) 5%, var(--hair) 28%);
    transform: scaleX(-1);
  }
  .hair-back {
    @include w-h(13, 10);
    background: var(--hair);
    bottom: 10%;
    border-radius: 50%;
    &#l {
      left: 26%;
    }
    &#r {
      right: 24%;
    }
  }
  #ear-l {
    @extend %ear;
    left: 7%;
  }
  #ear-r {
    @extend %ear;
    right: 5%;
    transform: scaleX(-1);
    background: linear-gradient(
      276deg,
      var(--skin) 45%,
      hsl(17, 51%, 69%) 100%
    );
  }
}
